<template>
  <div class="submit-box">
    <div class="submit-box-user-info">
      <van-notify id="van-notify"/>
      <div class="info-top">
        <van-cell-group>
          <van-field
            :value="subdata.name"
            placeholder="请输入您的真实姓名"
            label="您的姓名"
            required
            @blur="myBlur($event,'name')"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            :value="subdata.phoneNumber"
            placeholder="请输入您的联系电话"
            label="您的电话"
            required
            @blur="myBlur($event,'phoneNumber')"
          />
        </van-cell-group>
        <van-cell-group>
          <VanPickerSelect :vanCellTitle="vanCellTitle" :isShow="false" :columns="visitReasonColumns"
                           @onConfirm="getVisitReasonValue"/>
        </van-cell-group>
        <van-cell-group>
          <van-field
            :value="subdata.visitCompany"
            placeholder="请输入来访公司名称"
            label="来访公司"
            required
            @blur="myBlur($event,'visitCompany')"
          />
        </van-cell-group>
        <van-cell-group>
          <VanPickerSelectTime :vanCellTitle="vanCellTimeTitle" :isShow="false"
                               @onConfirm="getVanCellTimeVale"/>
        </van-cell-group>
        <van-cell-group>
          <van-field
            :value="subdata.belongings"
            placeholder="请输入随身物品"
            label="随身物品"
            @blur="myBlur($event,'belongings')"
          />
        </van-cell-group>
      </div>

      <div class="info-middle">
        <van-cell-group>
          <van-field
            :value="subdata.visitNumber"
            placeholder="请输入访问人数"
            label="访问人数"
            required
            @blur="myBlur($event,'visitNumber')"
          />
        </van-cell-group>

        <van-cell-group>
          <van-field
            :value="subdata.visitName"
            placeholder="请输入随访人姓名"
            label="随访人姓名"
            @blur="myBlur($event,'visitName')"
          />
        </van-cell-group>
      </div>
      <div class="info-footer">
        <van-cell-group>
          <VanPickerSelect :vanCellTitle="accessAddressTitle" :isShow="false"
                           :columns="accessAddressColumns"
                           @onConfirm="getAccessAddressVale"/>
        </van-cell-group>
        <van-cell-group>
          <van-field
            :value="subdata.accessPhone"
            placeholder="请输入受访人电话"
            label="受访人电话"
            @blur="myBlur($event,'accessPhone')"
          />
          <van-field
            :value="accessName"
            placeholder="请输入受访人电话"
            label="受访人姓名"
            required
            readonly
            @blur="myBlur($event,'accessName')"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="submit-box-footer">
      <van-button round custom-class="submit-btn" type="info" @click="onBookingClick">
        <span class="submit-btn-text">
        提交</span>
      </van-button>
    </div>
  </div>
</template>

<script>
  import VanPickerSelect from '../../components/base/VanPickerSelect'
  import VanPickerSelectTime from '../../components/base/VanPickerSelectTime'
  import {VAN_CELL_TITLE, VAN_CELL_TIME_TITLE, ACCESS_ADDRESS_TITLE} from '../../utils/consot'
  // eslint-disable-next-line no-unused-vars
  import {getVisitReasonColumns, getList, saveAccess, getIntervieweeInfo} from '../../api/index'
  import Notify from 'vant-weapp/dist/notify/notify'
  import {checkPhone} from '../../utils/stringUtil'
  import {getStorageSync} from '../../api/wechat'

  export default {
    components: {
      VanPickerSelectTime,
      VanPickerSelect
    },
    data () {
      return {
        subdata: {
          openId: '',
          name: '',
          phoneNumber: '',
          visitReason: 0,
          visitTime: '',
          belongings: '',
          visitCompany: '',
          visitNumber: '',
          visitName: '',
          accessAddress: '',
          accessPhone: '',
          vanCellVale: ''
        },
        visitReasonColumns: [],
        accessAddressColumns: [],
        vanCellTitle: VAN_CELL_TITLE,
        vanCellTimeTitle: VAN_CELL_TIME_TITLE,
        accessAddressTitle: ACCESS_ADDRESS_TITLE,
        accessName: ''
      }
    },
    methods: {
      onChange () {

      },
      getVisitReasonValue (value) {
        this.subdata.visitReason = value
      },
      getAccessAddressVale (value) {
        this.subdata.accessAddress = value
      },
      getVanCellTimeVale (value) {
        this.subdata.visitTime = value.time
      },
      onBookingClick () {
        let subState = true
        if (!this.subdata.name) {
          Notify({type: 'danger', message: '请输入您的真实姓名'})
          subState = false
        } else if (!this.subdata.phoneNumber || !checkPhone(this.subdata.phoneNumber)) {
          Notify({type: 'danger', message: '请输入您的联系电话'})
          subState = false
        } else if (!this.subdata.visitReason) {
          Notify({type: 'danger', message: '请选择来访事由'})
          subState = false
        } else if (!this.subdata.visitCompany) {
          Notify({type: 'danger', message: '请输入来访公司名称'})
          subState = false
        } else if (!this.subdata.visitTime) {
          Notify({type: 'danger', message: '请选来访时间'})
          subState = false
        } else if (!this.subdata.visitNumber) {
          Notify({type: 'danger', message: '请输入访问人数'})
          subState = false
        } else if (!this.subdata.accessAddress) {
          Notify({type: 'danger', message: '请选拜访地址'})
          subState = false
        } else if (!this.subdata.accessPhone || !checkPhone(this.subdata.accessPhone)) {
          Notify({type: 'danger', message: '请输入受访人电话'})
          subState = false
        } else if (!this.accessName) {
          Notify({type: 'danger', message: '请检查受访人电话是否匹配'})
          subState = false
        }
        console.log(getStorageSync('openId'))
        if (subState) {
          this.subdata.openId = getStorageSync('openId')
          saveAccess(this.subdata).then(request => {
            this.$router.push({
              path: '/pages/index/main'
            })
          })
        }
      },
      getVisitReasonColumns () {
        getList('visiting_reason').then(response => {
          const {data: {data}} = response
          for (let tem in data) {
            this.visitReasonColumns.push({
              text: data[tem].dictLabel,
              value: data[tem].dictValue
            })
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getAccessAddressColumns () {
        getList('visit_address').then(response => {
          const {data: {data}} = response
          for (let tem in data) {
            this.accessAddressColumns.push({
              text: data[tem].dictLabel,
              value: data[tem].dictValue
            })
          }
        }).catch(err => {
          console.log(err)
        })
      },
      myBlur: function (e, name) {
        console.log(name)
        if (name === 'name') {
          this.subdata.name = e.mp.detail.value
        } else if (name === 'phoneNumber') {
          this.subdata.phoneNumber = e.mp.detail.value
        } else if (name === 'visitCompany') {
          this.subdata.visitCompany = e.mp.detail.value
        } else if (name === 'belongings') {
          this.subdata.belongings = e.mp.detail.value
        } else if (name === 'visitNumber') {
          this.subdata.visitNumber = e.mp.detail.value
        } else if (name === 'visitName') {
          this.subdata.visitName = e.mp.detail.value
        } else if (name === 'accessPhone') {
          getIntervieweeInfo(e.mp.detail.value).then(response => {
            const {data: {data: {name}}} = response
            this.accessName = name
          })
          this.subdata.accessPhone = e.mp.detail.value
        }
      }
    },
    mounted () {
      this.getVisitReasonColumns()
      this.getAccessAddressColumns()
    }
  }
</script>

<style lang="scss" scoped>
  .submit-box {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #eee;

    .submit-box-user-info {
      padding: 0 10px;

      .info-top, .info-middle, .info-footer {
        border-radius: 10px;
        padding-top: 10px;
        margin: 10px;
      }
    }

    .submit-box-footer {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

  }
</style>
<style lang="scss">
  .submit-btn {
    width: 300px;
  }
</style>
